<template>
   <PageLayout>
    <template v-slot:header>
        <el-input v-model="query.name" placeholder="输入产品名字查询" size="small"></el-input>
        <el-button @click="queryEvt" type="primary" size="small">查询</el-button>
        <el-button type="success" size="small">新增</el-button>
    </template>
        <el-table
            :data="tableData"
            size="small"
            stripe
            height="100%"
            style="width: 100%">							
            <el-table-column prop="name" label="产品名字" show-overflow-tooltip width="100" fixed="left"/>
            <el-table-column prop="state" label="状态" width="100" fixed="left">
                <template v-slot="{row:{state}}">
                    <div v-myState="state">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100">
                <template v-slot="data">
                   <div>
                      {{data.row.type | typeFilter(medicalType) }}
                   </div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="级别" width="100">
                <template v-slot="level">
                    <div @click="levelEvt(level)">
                        {{level.row.level | typeFilter(levelType)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="100"/>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="150"/>
            <el-table-column prop="price" label="售价" width="100"/>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip width="150"/>
            <!-- <el-table-column  label="操作" width="150" fixed="right"/> -->
            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="{ row }">
                    <el-button @click="detailEvt(row)" type="text" size="small">详情</el-button>
                    <el-button v-if="row.state==='new'" type="text" size="small">编辑</el-button>
                    <el-popconfirm :title="`确定要删除${row.name}该产品吗，看清楚哦!`" style="margin:0 9px " >
                        <template #reference>
                            <el-button v-if="row.state==='new'" type="text" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button v-if="row.state==='new'" type="text" size="small">审批</el-button>
                    <el-button v-if="row.state==='sales'" type="text" size="small">下架</el-button>
                    <el-button v-if="row.state==='finish'" type="text" size="small">上架</el-button>
                </template>
            </el-table-column>

        </el-table>
    <template v-slot:footer>
            <el-pagination
                :page-sizes="[20, 40, 60, 80]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </template>
   </PageLayout>
</template>
<script>
import { dictListApi, productListApi } from '../../../apis/productApi.js'
export default {
    data(){
        return{
            // tableData:Array.from(Array(30),()=>({
            //     date: '2016-05-02',
            //     name: '王小虎',
            //     address: '上海市普陀区金沙江路 1518 弄'
            // })),
            tableData:[],
            total:0,
            changeTimer:null,
            medicalType:[],
            levelType:[],
            query:{
                page:1,
                size:20,
                name:''
            }
        }
    },
    directives:{
        myState(el,{value}){
            // console.log(el,value)
            let obj = {
                sales:{text:'在售',class:'product-state sales'},
                finish:{text:'已下架',class:'product-state'},
                new:{text:'新建',class:'product-state new'}
            }
            // console.log(obj[value])
            el.innerHTML=obj[value].text
            el.setAttribute('class',obj[value].class)
        }
    },
    filters:{
        // typeFilter(val ,types){
        //     let dict = types.find(it=>it.code===val)
        //     if(!dict) return val
        //     return dict.name
        // },
        // levelFilter(val ,level){
        //     // console.log(val ,level)
        //     // debugger
        //     let levelName = level.find(it=>it.code===val)
        //     if(!levelName) return val
        //     return levelName.name
        // }
    },
     async mounted(){
        let result = await dictListApi('MEDICAL')
        // console.log(result)
        if(result.code === 200){
            this.medicalType = result.data.rows
        }
        let res = await dictListApi('PRODUCT_LEVEL')
        if(res.code === 200){
            this.levelType = res.data.rows
        }
        this.getList()
    },
    methods:{
        levelEvt(l){
            console.log(l)
        },        
        dataEvt(d){
            console.log(d)
        },
        detailEvt(data){
            // console.log(data)
            this.$router.push('/product/detail?id='+data.id)
        },
        sizeChange(size){
            //size是指20/页变成其它的
            this.query.size=size
            if(this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer=setTimeout(()=>{
                this.getList()
            })
        },
        currentChange(page){
            //size是指变成了第几页，点击和输入再enter都会触发
            this.query.page=page
            if(this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer=setTimeout(()=>{
                this.getList()
            })
        },
        async getList(){
            let result = await productListApi(this.query)
            if(result.code===200){
                this.tableData=result.data.rows
                this.total=result.data.count
            }
        },
       async queryEvt(){
            this.query.page=1
            this.getList()
        }
    }
}
</script>

<style lang="less" scoped>
   .product-state{
    color: rgb(247, 37, 37);
    &::before{
        content: '';
        display: inline-block;
        vertical-align: center;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgb(247, 37, 37);
        margin-right: 3px;
    }
    &.sales{
        color: blueviolet;
        &::before{
            background-color: blueviolet;
        }
    }
    &.new{
        color: rgb(48, 242, 106);
        &::before{
            background-color: rgb(48, 242, 106);
        }
    }
   }
</style>